<template>
  <div>
    <z-steps :current="current">
      <z-step v-for="item in steps" :key="item.title" :title="item.title" />
    </z-steps>
    <div class="steps-content">
      {{ steps[current].content }}
    </div>
    <div class="steps-action">
      <z-button v-if="current < steps.length - 1" type="primary" @click="next"
        >Next</z-button
      >
      <z-button
        v-if="current == steps.length - 1"
        type="primary"
        @click="message.success('Processing complete!')"
      >
        Done
      </z-button>
      <z-button v-if="current > 0" style="margin-left: 8px" @click="prev"
        >Previous</z-button
      >
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'
import { message } from '../../../../lib/index.js'
export default defineComponent({
  name: 'StepsDemo3',
  setup() {
    const current = ref(0)

    const next = () => {
      current.value++
    }

    const prev = () => {
      current.value--
    }

    return {
      message,
      current,
      steps: [
        {
          title: 'First',
          content: 'First-content'
        },
        {
          title: 'Second',
          content: 'Second-content'
        },
        {
          title: 'Last',
          content: 'Last-content'
        },
      ],
      next,
      prev
    }
  }
})
</script>
<style scoped>
.steps-content {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}

.steps-action {
  margin-top: 24px;
}

[data-theme='dark'] .steps-content {
  background-color: #2f2f2f;
  border: 1px dashed #404040;
}
</style>
